
<div class="user-login-container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">用户注册</h3>
    </div>
    <div class="panel-body">
      <form #form="ngForm" (ngSubmit)="form.form.valid && register();" novalidate class="form-horizontal" role="form">
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
          <label class="col-sm-2 control-label">用户名：</label>
          <div class="col-sm-10">
            <input required name="userName" [(ngModel)]="user.username" #userName="ngModel" type="text" class="form-control" placeholder="请输入用户名">
            <div *ngIf="form.submitted && !userName.valid" class="text-danger">用户名必须输入！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !password.valid }">
          <label class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-10">
            <input required minlength="6" [(ngModel)]="user.password" name="password" #password="ngModel" type="password" class="form-control" placeholder="请输入密码,至少要6位">
            <div *ngIf="form.submitted && !password.valid" class="text-danger">密码必须输入,至少要6位！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !confirmPassword.valid }">
          <label class="col-sm-2 control-label">确认密码：</label>
          <div class="col-sm-10">
            <input required minlength="6" [(ngModel)]="confirmpassword" name="confirmPassword" #confirmPassword="ngModel" type="password" class="form-control" placeholder="请输入确认密码">
            <div *ngIf="form.submitted && !confirmPassword.valid" class="text-danger">确认密码必须输入,至少要6位！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !nickname.valid }">
          <label class="col-sm-2 control-label">昵称：</label>
          <div class="col-sm-10">
            <input [(ngModel)]="user.nickname" name="nickname" #nickname="ngModel" type="text" class="form-control" placeholder="请输入昵称，可以不填">
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !confirmPassword.valid }">
          <label class="col-sm-2 control-label">邮箱:</label>
          <div class="col-sm-10">
            <input required minlength="6" [(ngModel)]="user.email" name="email" #email="ngModel" type="text" class="form-control" placeholder="请输入邮箱">
            <div *ngIf="form.submitted && !password.valid" class="text-danger">email必须输入</div>
          </div>
        </div>

        <div *ngIf="error" class="col-sm-offset-2 col-sm-10 alert alert-danger">{{error}}</div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">注册</button>
            <button type="reset" class="btn btn-danger" style="margin-left: 10px">清空表单</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
